<template>
  <div v-loading="loading" class="box">
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      {{ $t('home.Paymentcard') }}
    </div>
    <!-- 银行卡 -->
    <div class="card col-wrapper">
      <div v-for="item in cardList"
           @click="$router.push({path:'/listUnbindCard',query:{
             id:item.id,
             card_number:item.card_number,
             bank_name:item.bank_name}})"
           :key="item.ROW_NUMBER"
           :class="checkBank(item.bank_id)" class="jianhang card_YH">
        <div style="margin-left: 10px">{{ item.bank_name }}</div>
        <!--        <div style="margin-left: 10px">储蓄卡</div>-->
        <div style="margin-left: 10px">{{ item.card_number }}</div>
      </div>
    </div>
    <!--  -->
    <div class="btn_YH" @click="addCard">
      <span>{{ $t('home.Adddebit/creditcard') }}</span><span class="el-icon-plus"></span>
    </div>
  </div>
</template>

<script>
import {bankCardList} from '@/api/merbership/member'
import {bind_user_bank_pay} from '@/api/merbership/userpay'
import '@/styles/flax.css'

export default {
  data() {
    return {
      cardList: [],
      loading: false
    }
  },
  activated() {
    this.bankCardList()
  },
  methods: {
    /**
     * 添加银行卡
     */
    addCard() {
      // this.$router.push({path: '/listAddCard'})
      this.bind_user_bank_pay()
    },
    /**
     * 判断银行卡类型
     * @param id
     * @returns {{zhonghang: boolean}|{jianhang: boolean}}
     */
    checkBank(id) {
      switch (id) {
        case '1':
          return {
            'jianhang': true
          }
        case '2':
          return {
            'zhonghang': true
          }
        default:
          break
      }
    },
    // ---------------- axios -----------------
    /**
     * 充值1元绑定银行卡
     */
    bind_user_bank_pay() {
      this.loading = true
      const pd = {}
      this.$message.info('请稍后')
      bind_user_bank_pay(this.$qs.stringify(pd))
        .then(res => {
          // this.loading = false
          if (res.data.code === 1) {
            window.location.replace(res.data.data)
            // this.create_recharge()
          } else {
            this.loading = false
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 银行卡列表
     */
    bankCardList() {
      const pd = {}
      bankCardList(pd)
        .then(res => {
          this.cardList = res.data.data.list
        })
    }
  }
}
</script>

<style scoped>
/* 标题 */
.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/*  */
/*  .card {
    margin: 15px;
  } */

/* jianhang */
.card_YH {
  width: 80%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #FFF;
  padding: 15px;
}

.card_YH > div {
  margin: 15px;
}

.card_YH > div:nth-child(1) {
  font-size: 18px;
}

.card_YH > div:nth-child(2) {
  font-size: 14px;
}

.card_YH > div:nth-child(3) {
  font-size: 15px;
}

.jianhang {
  /*background-image: url(../../../../assets/static/cardList/q1.png);*/
  background-image: url(../../../../assets/static/cardList/1.svg);
  /*height: 80px;*/
  width: 80%;
}

.zhonghang {
  /*background-image: url(../../../../assets/static/cardList/q2.png);*/
  background-image: url(../../../../assets/static/cardList/1.svg);
}

/*  */
.btn_YH {
  margin: 50px;
  background-image: linear-gradient(to right, #FED000, #FFB200);
  color: #FFFFFF;
  font-size: 14px;
  padding: 15px;
  text-align: center;
  border-radius: 25px;
  font-weight: bold;
}

.el-icon-plus {
  font-weight: 1000;
  margin-left: 5px;
  font-size: 14px;
}
</style>
